<template lang='pug'>
  section
    van-nav-bar(
      left-arrow
      title="我的推荐"
      @click-left="$router.back()"
      )
    header.header
      .avatar(:style='{backgroundImage: `url(${user && user.userWx && user.userWx.headImageUrl})`}')
      .username {{user && user.userWx && user.userWx.nickname}}
      .credit 积分0
    main
      v-title(title="我推荐的人")
      van-list(
        v-model="isLoading"
        :finished="finished"
        )
        .vant-list-item.border-1px(v-for="recommend in recommends" :key="recommend.user.id")
          .avatar-sm(:style="{backgroundImage: `url(${recommend.userWx && recommend.userWx.headImageUrl})`}")
          .username {{recommend.userWx && recommend.userWx.nickname}}
          .level {{recommend.user && recommend.user.level}}
          
    empty(title="您还没有推荐的人 😃" v-show="!isLoading && !recommends.length")
</template>

<script type='text/ecmascript-6'>
  import title from '~/components/title'
  import empty from '~/components/empty'

  export default {
    components: {
      'v-title': title,
      empty,
    },
    data() {
      return {
        isLoading: true,
        finished: true,
        recommends: []
      }
    },
    computed: {
      user() {
        return this.$store.state.authUser || {}
      },
      userId() {
        if (!this.user ||!this.user.user) return ''
        return this.user.user.id
      },
    },
    beforeMount() {
      this.getRecommends()
    },
    methods: {
      async getRecommends() {
        this.isLoading = true
        const resp = await this.$post('/api/platform/user/findUserVoPage', {id: this.userId})
        this.isLoading = false
        this.recommends = resp.data || []
      },
    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

@import '~assets/stylus/variable.styl'
@import '~assets/stylus/mixin.styl'
 
header
  text-align center
  line-height 2
.vant-list-item
  margin 0 1rem
  padding 1rem 0
  display flex
  align-items center
  border-1px($color-border-l)
  .username
    flex 1
    margin 0 1rem
</style>
